import React, { memo, useState, useCallback } from 'react';
import { Button, Modal, Form, Input, Icon, DatePicker } from 'antd';
import moment from 'moment';

import { download } from '@/utils/utils';
import { payoffService } from '@/services/salaryManage/salaryCalculate';

import LimitInput from '@/components/LimitInput';
import rejectStyles from '@/pages/SalaryManage/SalaryCalculate/Recheck/components/CheckHandle/index.less';

const { exportFile } = payoffService;

//  Excel导出
const PayoffExport = memo(
    ({ handleItem, form, period, paymentTime, organizationCode, departmentCode, updateStateFn }) => {
        const { getFieldDecorator } = form;

        //  弹窗=》确定按钮是否加载状态
        const [confirmLoad, setConfirmLoad] = useState(false);
        const [modalVisible, setModalVisible] = useState(false);

        // 关闭弹窗
        const onRejectClose = () => {
            setModalVisible(false);
        };

        // 确认按钮
        const onRejectOk = useCallback(() => {
            form.validateFields(async (errors, value) => {
                if (errors) {
                    return;
                }
                const year = period.substr(0, 4);
                const month = period.substr(5);
                setConfirmLoad(true);
                const exportFileRes = await exportFile({
                    year,
                    month,
                    departmentCode,
                    organizationCode,
                    ...value,
                    paymentTime: moment(value.paymentTime).format('YYYY-MM-DD')
                });

                download({
                    getData: () => exportFileRes
                });
                setConfirmLoad(false);
                updateStateFn();
                setModalVisible(false);
            });
        }, [departmentCode, form, organizationCode, period, updateStateFn]);

        // 默认
        const getDefaultFileName = periodStr =>
            periodStr ? `${periodStr}薪资清单 ${moment().format('YYYYMMDD')}` : '';
        const getDefaultDescription = periodStr => (periodStr ? `${periodStr}薪资` : '');

        const title = 'Excel导出';

        // 打开弹窗
        const exportHandle = () => {
            setModalVisible(true);
        };

        return (
            <>
                <Button type="primary" key={handleItem.code} onClick={exportHandle}>
                    {handleItem.name}
                </Button>
                <Modal
                    title={title}
                    visible={modalVisible}
                    onOk={onRejectOk}
                    onCancel={onRejectClose}
                    destroyOnClose
                    confirmLoading={confirmLoad}
                >
                    <div className={rejectStyles.msg}>
                        <Icon type="exclamation-circle" theme="filled" />
                        请填写Excel表名及摘要
                    </div>
                    <Form
                        layout="inline"
                        className={rejectStyles.recheckForm}
                        labelCol={{ span: 6 }}
                        wrapperCol={{ span: 18 }}
                    >
                        <Form.Item label="付款日期">
                            {getFieldDecorator('paymentTime', {
                                initialValue: paymentTime ? moment(paymentTime) : '',
                                rules: [
                                    {
                                        required: true,
                                        message: '付款日期不能为空'
                                    }
                                ]
                            })(<DatePicker format="YYYY-MM-DD" />)}
                        </Form.Item>
                        <Form.Item label="Excel表名">
                            {getFieldDecorator('fileName', {
                                initialValue: getDefaultFileName(period),
                                rules: [
                                    {
                                        required: true,
                                        message: 'Excel表名不能为空'
                                    }
                                ]
                            })(<Input maxLength={20} />)}
                        </Form.Item>
                        <Form.Item label="摘要">
                            {getFieldDecorator('description', {
                                initialValue: getDefaultDescription(period),
                                rules: [
                                    {
                                        required: true,
                                        message: '摘要不能为空'
                                    }
                                ]
                            })(<Input maxLength={30} />)}
                        </Form.Item>
                        <Form.Item label="备注">
                            {getFieldDecorator('remark')(
                                <LimitInput rows={4} cols={45} maxLength={30} area showNumber placeholder="请输入" />
                            )}
                        </Form.Item>
                    </Form>
                </Modal>
            </>
        );
    }
);

export default memo(Form.create()(PayoffExport));
